<template>
  <div ref="brokenDom" style="height: 240px; width: auto；"></div>
</template>
<style scoped></style>
<script>
import { getBroken } from "../api/mainApi";
const option = {
  tooltip: {
    trigger: "axis",
    textStyle: {
      color: "white",//设置文字颜色
    },
  },
  legend: {
    data: [
      "本科生毕业数量",
      "本科生毕业就业率",
      "研究生毕业数量",
      "研究生毕业就业率",
    ],
    bottom: "bottom",
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "30",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [],
    axisTick: {
      show: false,
    },
  },
  yAxis: [
    {
      name: "毕业数量",
      type: "value",
      min: "dataMin", // 最小值
    },
    {
      name: "毕业就业率",
      type: "value",
      max: 100,
      interval: 20,
      axisLabel: {
        formatter: "{value}%",
      },
      min: "dataMin", // 最小值
    },
  ],
  series: [
    {
      name: "本科生毕业数量",
      type: "line",
      stack: "本科生总量",
      yAxisIndex: 0,
      data: [],
      itemStyle: {
        normal: {
          lineStyle: {
            // color: "#ab1f2a",
          },
          // color: "#ab1f2a",
        },
      },
    },
    {
      name: "本科生毕业就业率",
      type: "line",
      stack: "本科生比率",
      yAxisIndex: 1,
      data: [],
    },
    {
      name: "研究生毕业数量",
      type: "line",
      stack: "研究生总量",
      yAxisIndex: 0,
      data: [],
    },
    {
      name: "研究生毕业就业率",
      type: "line",
      stack: "研究生比率",
      yAxisIndex: 1,
      data: [],
      itemStyle: {
        normal: {
          lineStyle: {
            // color: "#f96535",
          },
          // color: "#f96535",
        },
      },
    },
  ],
};
import 'echarts/theme/caravan.js'
import 'echarts/theme/dark-blue.js'
import 'echarts/theme/blue.js'
import 'echarts/theme/cool.js'
import 'echarts/theme/fresh-cut.js'
export default {
  name: "Broken",
  data() {
    return {
      bachelor: [],
      master: [],
    };
  },
  mounted() {
    getBroken((bachelor, master) => {
      this.bachelor = bachelor;
      this.master = master;
    })
      .then(() => {
        this.setMaster();
        this.setBachelor();
      })
      .then(() => {
        this.mychart = this.$echarts.init(this.$refs.brokenDom, "fresh-cut");
        this.mychart.setOption(option);
      });
  },
  computed: {
    myChart() {
      return this.$echarts.init(this.$refs.brokenDom);
    },
  },
  methods: {
    setBachelor() {
      //数量
      option.series[0].data = this.bachelor.map((a) => {
        return (a = a.number);
      });
      //比率
      option.series[1].data = this.bachelor.map((a) => {
        return (a = (a.rate * 100).toFixed(1));
      });
      //年份
      option.xAxis.data = this.bachelor.map((a) => {
        return (a = a.year);
      });
    },
    setMaster() {
      //数量
      option.series[2].data = this.master.map((a) => {
        return (a = a.number);
      });
      //比率
      option.series[3].data = this.master.map((a) => {
        return (a = (a.rate * 100).toFixed(1));
      });
      //年份
      option.xAxis.data = this.master.map((a) => {
        return (a = a.year);
      });
    },
    resize() {
      this.myChart.resize();
    },
  },
};
</script>
